import { Row, Col, ColorPicker, Select, Space, Radio, Divider, Checkbox, InputNumber } from 'antd'
import EditorExecutor from '@/executor/EditorExecutor'
import React, { useEffect, useState } from 'react'
import Editor from '../../Editor'
import IconButton from '@/components/Icon'
import swapOutlined from '@iconify/icons-ant-design/swap-outlined'

// 页面尺寸选项
const PageSizeOptions = [
  { value: 'a3', label: 'A3 (297 mm x 420 mm)', format: new mxRectangle(0, 0, 1169, 1654) },
  { value: 'a4', label: 'A4 (210 mm x 297 mm)', format: mxConstants.PAGE_FORMAT_A4_PORTRAIT },
  { value: 'a5', label: 'A5 (148 mm x 210 mm)', format: new mxRectangle(0, 0, 583, 827) },
  { value: '', label: '自定义', format: new mxRectangle(0, 0, 583, 827) }
]

// 网格尺寸选项
const gridSizeOptions = [
  { value: 10, label: '小' },
  { value: 15, label: '正常' },
  { value: 20, label: '大' },
  { value: 30, label: '很大' },
  { value: 0, label: '自定义' }
]

export default function PagePane(props: { editor: Editor }) {
  // 当前页面的尺寸
  const [pageSize, setPageSize] = useState('')
  // 页面宽度
  const [pageW, setPageW] = useState(827) //默认A4的值
  // 页面高度
  const [pageH, setPageH] = useState(1169)
  // 网格是否可用
  const [gridEnabled, setGridEnabled] = useState(false)
  // 网格尺寸选项
  const [gridSizeOption, setGridSizeOption] = useState(10)
  //网格尺寸
  const [gridSize, setGridSize] = useState(10)
  // 页面模式是否可用
  const [pageVisible, setPageVisible] = useState(false)
  // 是否可用连接箭头
  const [connectArrowEnabled, setConnectArrowEnabled] = useState(true)
  // 是否可用连接点
  const [connectable, setConnectable] = useState(true)
  /**
   * 切换页面尺寸
   * @param v
   */
  const onPageFormatChange = (v: string) => {
    setPageSize(v)
    // 找到当前的当前页面尺寸
    const currentPageSize = PageSizeOptions.find((item) => item.value == v)
    //todo: 此处可以扩展自定义的情况
    if (!currentPageSize) {
      return
    }
    const { width, height } = currentPageSize.format
    setPageH(height)
    setPageW(width)

    EditorExecutor.setPageFormat(currentPageSize.format)
  }
  /**
   * 切换页面方向
   * @param v
   */
  const onSwitchPageDirection = () => {
    setPageH(pageW)
    setPageW(pageH)
    const format = new mxRectangle(0, 0, pageH, pageW)
    EditorExecutor.setPageFormat(format)
  }

  /**
   * 当网格尺寸发生变化
   * @param v
   */
  const onGridSizeChange = (v: number) => {
    EditorExecutor.setGridSize(v)
    setGridSizeOption(v)
  }

  /**
   * 页面视图切换
   * @param checked
   */
  const onPageViewChange = (checked: boolean) => {
    EditorExecutor.setPageVisible(checked)
    setPageVisible(checked)
  }

  useEffect(() => {
    if (props.editor) {
      const { graph } = props.editor
      const { height, width } = graph.pageFormat
      setPageH(height)
      setPageW(width)

      //页面尺寸
      const o = PageSizeOptions.find((item) => {
        const { height: h, width: w } = item.format
        if ((h == height && w == width) || (w == height && h == width)) {
          return true
        } else {
          return false
        }
      })
      if (o) {
        setPageSize(o.value)
      } else {
        setPageSize('')
      }

      // 设置网格可用
      setGridEnabled(graph.gridEnabled)
      setGridSize(graph.gridSize)
      const gOpt = gridSizeOptions.find((item) => item.value == graph.gridSize)
      if (gOpt) {
        setGridSizeOption(gOpt.value)
      } else {
        setGridEnabled(false)
      }
      // 设置页面模式可用
      setPageVisible(graph.pageVisible)
    }
  }, [props.editor])

  return (
    <>
      <Space direction="vertical" size="small" style={{ display: 'flex' }}>
        <Row>
          <Col span={12} className="label">
            背景颜色
          </Col>
          <Col span={12} className="flex flex-justify-end ">
            <ColorPicker
              onChangeComplete={(c) => {
                EditorExecutor.setBackgroundColor(c.toHexString())
              }}
            />
          </Col>
        </Row>
        <div className="h-36px flex flex-content-center flex-wrap">
          <Select
            options={PageSizeOptions}
            defaultValue={pageSize}
            className="h-26px w-100%"
            onChange={onPageFormatChange}
          />
        </div>
        <Row>
          <Col span="9">
            <InputNumber
              className="h-26px w-100% font-size-12px"
              defaultValue={20}
              value={pageW}
              min={0}
              formatter={(value) => `${value}px`}
              //@ts-ignore
              parser={(value) => value!.replace('px', '')}
            />
          </Col>
          <Col span="6" className="flex flex-justify-center">
            <IconButton
              icon={swapOutlined}
              tip=""
              fontSize={15}
              className=" w-24px h-24px"
              onClick={() => onSwitchPageDirection()}
            />
          </Col>
          <Col span="9">
            <InputNumber
              className="h-26px w-100% font-size-12px"
              defaultValue={20}
              value={pageH}
              min={0}
              formatter={(value) => `${value}px`}
              //@ts-ignore
              parser={(value) => value!.replace('px', '')}
            />
          </Col>
        </Row>

        <Divider className="mt-0px mb-8px" />
        <Row>
          <Col span={12} className="label">
            <Checkbox
              className="font-size-13px"
              checked={gridEnabled}
              onChange={(e) => {
                const enabled = e.target.checked
                EditorExecutor.setGridEnabled(enabled)
                setGridEnabled(enabled)
              }}
            >
              {' '}
              显示网格{' '}
            </Checkbox>
          </Col>
        </Row>
        <Row>
          <Col span={10}>网格大小</Col>
          <Col span={14}>
            <Select
              className="h-26px w-100% font-size-12px"
              value={gridSizeOption}
              onChange={(v) => onGridSizeChange(v)}
              options={gridSizeOptions}
            />
          </Col>
        </Row>
        <Row>
          <Col span={10}>网格尺寸</Col>
          <Col span={14}>
            <InputNumber
              className="h-26px w-100% font-size-12px"
              defaultValue={20}
              value={gridSize}
              min={0}
              max={50}
              formatter={(value) => `${value}px`}
              //@ts-ignore
              parser={(value) => value!.replace('px', '')}
            />
          </Col>
        </Row>
        <Divider className="mt-0px mb-8px" />
        <Row>
          <Col span={12} className="label">
            <Checkbox
              className="font-size-13px"
              checked={pageVisible}
              onChange={(e) => onPageViewChange(e.target.checked)}
            >
              页面视图
            </Checkbox>
          </Col>
        </Row>
        <Divider className="mt-0px mb-8px" />
        <Row>
          <Col span={12}>
            <Checkbox
              className="font-size-12px"
              checked={connectArrowEnabled}
              onChange={(e) => {
                const checked = e.target.checked
                setConnectArrowEnabled(checked)
                EditorExecutor.setConnectArrowEnabled(checked)
              }}
            >
              连接箭头
            </Checkbox>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Checkbox
              className="font-size-12px"
              checked={connectable}
              onChange={(e) => {
                const checked = e.target.checked
                setConnectable(checked)
                EditorExecutor.setConnectable(checked)
              }}
            >
              连接点
            </Checkbox>
          </Col>
        </Row>
      </Space>
    </>
  )
}
